/*
* @Title: 正常头部样式组件
* @Created by: gsjPC
*/
<template>
	<view>
		<view :style="{height:statusBarHeight}" class="uni-status-bar">
		</view>
		<view class="com-box" :class="[config.isFixed? 'isFixed':'']">
			<view class="com-left" v-if="config.left.isShowLeft" @tap="leftIconTap">
				<uni-icon type="arrowleft" size="22" :color="config.left.leftGobackColor"></uni-icon>
				<!-- <text :color="config.left.leftTextColor">{{config.left.text}}</text> -->
			</view>
			<view class="com-mid" v-if="config.mid.isShowMid" :style="{color:config.mid.textColor}">
				{{config.mid.text}}
			</view>

			<view class="com-right" v-if="config.right.isShowRight" @tap="rightTapHandle">
				<text>{{config.right.text}}</text>
				<image :src="config.right.ico" v-if="config.right.isShowRightIco" @tap="rightIcoTapHandle"></image>
			</view>
		</view>
		<view class="fewg">
			<view class="selcontent" v-for="headersel in headercontent" :key="headersel.id">{{headersel.title}}</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				statusBarHeight: global.statusBarHeight + 'px',
				headercontent: [{
					id: 0,
					title: "美食商家入驻"
				}, {
					id: 1,
					title: "宾馆商家入驻"
				}, {
					id: 2,
					title: "旅游景区商家入驻"
				}, {
					id: 3,
					title: "休闲娱乐商家入驻"
				}]
				
			}
		},
		props: {
			rightIcoTapHandle: {
				default: function() {
					return function() {
						console.log('rightIcoTapHandle click');
					}
				}
			},
			config: {
				type: Object,
				default: function() {
					return {
						isFixed: false, //是否absolute布局
						left: {

							isShowLeft: true,
							leftGobackColor: 'black', //左边返回icon颜色
						},
						mid: {
							isShowMid: true,
							text: '添加游记',
							textColor: '#000'
						},
						right: {
							text: '发布',
							isShowRight: true,
							ico: '', //右侧图标地址
							isShowRightIco: '' //是否显示右侧图标
						}
					}
				}
			},
			
		},
		methods: {
			leftIconTap() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.fewg{
		font-size: 32upx;
		width: 100%;
		height: 0px;
	}	
	.selcontent{
		width: 100%;
		padding: 20upx 0px;
		text-align: center;
		
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}

	.com-box {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/* border:1upx solid red; */
		height: 88upx;
		line-height: 88upx;
	}

	.com-box>view {
		line-height: 88upx;
	}

	.isFixed {
		position: absolute;
		z-index: 10;
	}

	.com-left {
		position: absolute;
		display: flex;
		flex-direction: row;
		height: 88upx;
		justify-content: center;
		align-items: center;
		margin-left: 12upx;
	}

	.com-left text {
		font-size: 32upx;
	}

	.com-mid {
		position: absolute;
		width: 50%;
		left: 50%;
		margin-left: -25%;
		font-size: 36upx;
		text-align: center;
	}

	.com-right {
		position: absolute;
		font-size: 32upx;
		color: #5494FF;
		right: 20upx;
	}

	.com-right image {
		max-width: 44upx;
		max-height: 44upx;
	}

	/*  #ifdef MP-WEIXIN */
	.com-right {
		margin-top: 60upx;
	}
	
	
	/* #endif */
</style>
